<template>
  <div class="Create-a-new-flash-sale-activity"><h3>新建秒杀活动</h3></div>
  <div class="basic">
    <p>基础信息</p>
    <el-form
      ref="form"
      :model="sizeForm"
      label-width="auto"
      :label-position="labelPosition"
      :size="size"
      :inline="true"
      class="demo-form-inline"
    >
      <el-form-item label="活动名称">
        <el-input v-model="formInline.user" placeholder="请输入" />
        <div class="demo-date-picker">
          <div class="block">
            <span class="demonstration">活动日期</span>
            <el-date-picker
              v-model="value1"
              type="monthrange"
              range-separator="To"
              start-placeholder="Start month"
              end-placeholder="End month"
            />
          </div>
        </div>
      </el-form-item>
      <el-checkbox-group v-model="checkList">
        <el-checkbox label="不限购" />
        <el-checkbox label="最多购买" />
        <input type="text" placeholder="最多购买" style="width:60px;height:20px">
      </el-checkbox-group>
    </el-form>
  </div>

  <div class="ProductList">
    <div class="GoodsList">
      <span>商品列表</span>
      <el-row class="mb-4">
        <el-button type="primary">+添加商品</el-button>
      </el-row>
    </div>

    <div class="Product Information">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="goodsdate" label="商品信息" width="180" />
        <el-table-column prop="name" label="原价（元）" width="180" />
        <el-table-column prop="stock" label="库存" width="180" />
        <el-table-column prop="priceSpike" label="秒杀价" width="180" />
        <el-table-column
          prop="Flash Kill Inventory"
          label="秒杀库存"
          width="180"
        />
        <el-table-column prop="operate" label="操作" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
    </div>
  </div>

  <!-- <div>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="date" label="商品信息" width="180" />
    <el-table-column prop="name" label="原价（元）" width="180" />
    <el-table-column prop="name" label="库存" width="180" />
    <el-table-column prop="name" label="秒杀价" width="180" />
    <el-table-column prop="name" label="秒杀库存" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
  </div> -->
</template>
<script setup lang="ts">
import { reactive } from "vue";

const formInline = reactive({
  user: "",
  region: "",
});

const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    operate: "删除",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    operate: "删除",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    operate: "删除",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    operate: "删除",
  },
];
</script>
<style scoped>
.Create-a-new-flash-sale-activity {
  height: 80px;
  line-height: 80px;
  border: 0.3px rgba(205, 203, 203, 0.514) solid;
  margin-bottom: 16px;
}
.Create-a-new-flash-sale-activity h3 {
  margin-left: 20px;
}
.basic {
  border: 0.3px rgba(182, 181, 181, 0.477) solid;
  padding: 20px;
  margin-bottom: 20px;
}
.el-form {
  width: 500px;
}
.ProductList {
  border: 0.3px rgba(196, 195, 195, 0.362) solid;
}
.GoodsList {
  height: 50px;
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.el-checkbox-group{
  display: flex;
justify-content: space-evenly;
align-items: center;
}
</style>